﻿/*
$(document).ready(function () {
    var pageNum = 1;
    $('#more-photos').click(function (event) {
        event.preventDefault();
        var $link = $(this);
        var url = $link.attr('href');
        if (url) {
            $.get(url, function (data) {
                //alert(data);
                $('#gallery').append(data);
            });
        }
        pageNum++;
        if (pageNum < 20)
            $link.attr('href', 'pages/' + pageNum + '.html');
        else
            $link.remove();
    });

    //method 1:
    /*$('div.photo').hover(function () {
        $(this).find('.details').fadeTo('slow', 0.7);
    }, function () {
        $(this).find('.details').fadeOut('fast');
    });*/

    //method 2: 同方法1一样，新添加的图片不会有效果
    /*$('div.photo').on('mouseenter mouseleave', function (event) {
        $details = $(this).find('.details');
        if (event.type == 'mouseenter')
            $details.fadeTo('fast', 0.7);
        else
            $details.fadeOut('fast');
    });*/
/*
    //method 3:
    $(document).on('mouseenter mouseleave', 'div.photo', function (event) {
        $details = $(this).find('.details');
        if (event.type == 'mouseenter')
            $details.fadeTo('fast', 0.7);
        else
            $details.fadeOut('fast');
    });
});*/

/*
(function ($) {
    $(document).on('nextPage', function (event,scrollToVisible) {
        var url = $('#more-photos').attr('href');
        if (url) {
            $.get(url, function (data) {
                //$('#gallery').append(data);
                $data = $(data).appendTo('#gallery');
                if (scrollToVisible)
                    $(window).scrollTop($data.offset().top);
                checkScrollPosition();
            })
        }
    })

    var pageNum = 1;
    $(document).on('nextPage', function () {
        pageNum++;
        if (pageNum < 20)
            $('#more-photos').attr('href', 'pages/' + pageNum + '.html');
        else
            $('#more-photos').remove();
    })

    function checkScrollPosition() {
        //alert('$(window).scrollTop()=' + $(window).scrollTop() + '\r\n$(window).height()=' + $(window).height());
        //alert('$(window).scrollTop()+$(window).height()=' + ($(window).scrollTop() + $(window).height()));
        //alert("$('#container').height()=" + $('#container').height());

        if ($(window).scrollTop() + $(window).height() >= $('#container').height()) {
            $(document).trigger('nextPage');
        }
    }

    $(document).ready(function () {
        $('#more-photos').click(function (event) {
            event.preventDefault();
            $(this).trigger('nextPage',[true]);
        });

        $(document).on('mouseenter mouseleave', 'div.photo', function (event) {
            $details = $(this).find('.details');
            if (event.type == 'mouseenter')
                $details.fadeTo('fast', 0.7);
            else
                $details.fadeOut('fast');
        });

        var timer = 0;
        $(window).scroll(function () {
            if (!timer) {
                timer = setTimeout(function () {
                    checkScrollPosition();
                    timer = 0;
                }, 250);
            }
        }).trigger('scroll');
    });
    
    
})(jQuery);*/

// 课后练习
(function ($) {

    $(document).on('nextPage', function (event, scrollToVisible) {
        var url = $('#more-photos').attr('href');
        if (url) {
            //$(document).ajaxStart(function () { window.status = '正在加载'; })
            //$(document).ajaxComplete(function () { window.status = '加载完毕'; })
            //window.status = '正在加载';
            $.get(url, function (data) {
                //$('#gallery').append(data);
                $data = $(data).appendTo('#gallery');
                if (scrollToVisible)
                    $(window).scrollTop($data.offset().top);
                checkScrollPosition();
            })
        }
       
        $(document).trigger('pageLoaded');
    })

    var pageNum = 1;
    $(document).on('nextPage', function () {
        pageNum++;
        if (pageNum < 20)
            $('#more-photos').attr('href', 'pages/' + pageNum + '.html');
        else
            $('#more-photos').remove();
    })

    //(2) 添加一个名为pageLoaded的自定义事件，在新一组照片加载完成后触发。 
    $(document).on('pageLoaded', function () {
        //alert('pageLoaded');
        //(3) 使用nextPage和pageLoaded处理程序，仅在加载新页面的过程中在页面底部显示一条“正在加载”消息。 
        //window.status = '加载完毕';
    })

    function checkScrollPosition() {
        if ($(window).scrollTop() + $(window).height() >= $('#container').height()) {
            $(document).trigger('nextPage');
        }
    }

    $(document).ready(function () {
        $('#more-photos').click(function (event) {
            event.preventDefault();
            $(this).trigger('nextPage', [true]);
        });

        $(document).on('mouseenter mouseleave click', 'div.photo', function (event) {
            $details = $(this).find('.details');
            if (event.type == 'mouseenter')
                $details.fadeTo('fast', 0.7);
            else if (event.type == 'mouseleave')
                $details.fadeOut('fast');
            else if (event.type == 'click')
                $('div.photo').toggleClass('selected');//(1) 当用户单击照片时，为包含照片的<div>添加或删除selected类。要保证通过Next Page 链接添加的照片同样也具有这种行为。
            //else if (event.type == 'mousemove')//(4) 为照片绑定mousemove处理程序，记录鼠标的当前位置（使用console.log()）。 
            //    console.log('x:' + event.clientX + "\r\ny:" + event.clientY);
        });

        var timer2 = 0;//(5) 改进mousemove处理程序，使其每秒钟最多记录5次位置信息。 
        $(document).on('mousemove', 'div.photo', function (event) {
            if (!timer2) {
                timer2 = setTimeout(function () {
                    console.log('x:' + event.clientX + "\r\ny:" + event.clientY);
                    timer2 = 0;
                }, 200);
            }
        })

        var timer = 0;
        $(window).scroll(function () {
            if (!timer) {
                timer = setTimeout(function () {
                    checkScrollPosition();
                    timer = 0;
                }, 250);
            }
        }).trigger('scroll');
    });
    

    //(6) 挑战：创建一个新的名为tripleclick的特殊事件，当鼠标在500毫秒内单击3次的情况下触发。为了测试这个事件，请给<h1>元素绑定一个tripleclick处理程序，“三击”这个<h1>可以隐藏或显示<div id="gallery">的内容。 

})(jQuery)
